<template>
  <div class="employees-container">
    <div class="app-container">
      <!-- 员工页头 -->
      <PageHeader>
        <template #left>
          <span>
            总记录数 : {{ total }} 条
          </span>
        </template>
        <template #right>
          <el-button
            type="warning"
            size="small"
            @click="$router.push('/employees/upload-excel')"
          >导入</el-button>
          <el-button
            type="success"
            size="small"
            @click="handleDownload"
          >下载当前页</el-button>
          <el-button
            type="danger"
            size="small"
            @click="handleDownloadAll"
          >下载所有页</el-button>
          <el-button
            v-permission="'point-add'"
            type="primary"
            size="small"
            @click="showDialog = true"
          >
            新增员工
          </el-button>
        </template>
      </PageHeader>

      <!-- 卡片 - 主体内容 -->
      <el-card style="margin-top: 10px;">
        <!-- 表格 -->
        <el-table :data="employeeList" border stripe width="100%">
          <el-table-column label="序号" width="80" type="index" :index="indexMethod" />
          <el-table-column label="姓名" prop="username" width="100" />
          <el-table-column
            label="头像"
            width="120"
          >
            <template #default="{row}">
              <img
                v-imgerror="defaultImgUrl"
                :src="row.staffPhoto"
                width="70"
                @click="handleQrCode(row.staffPhoto)"
              >
            </template>
          </el-table-column>
          <el-table-column label="手机号" prop="mobile" width="120" />
          <el-table-column label="工号" prop="workNumber" width="120" />
          <el-table-column label="聘用形式" width="120">
            <template #default="{row}">
              {{ formatEmployment(row.formOfEmployment) }}
            </template>
          </el-table-column>
          <el-table-column label="部门" prop="departmentName" width="120" />
          <el-table-column label="入职时间 " prop="timeOfEntry" width="120" />
          <el-table-column label="账户状态" width="120">
            <template #default="{row}">
              {{ formatEnadleState(row.enableState) }}
            </template>
          </el-table-column>
          <el-table-column label="操作" fixed="right" width="300">
            <template #default="{row}">
              <el-button
                v-permission="'point-query'"
                type="text"
                size="small"
                @click="$router.push(`/employees/${row.id}`)"
              >查看</el-button>
              <el-button type="text" size="small">转正</el-button>
              <el-button type="text" size="small">调岗</el-button>
              <el-button type="text" size="small">离职</el-button>
              <el-button type="text" size="small" @click="handleOpen(row.id)">角色</el-button>
              <el-button
                v-permission="'point-del'"
                type="text"
                size="small"
                @click="handleDel(row.id)"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页组件 -->
        <el-pagination
          :current-page="query.page"
          :page-sizes="[2, 3, 5, 10]"
          :page-size="query.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </el-card>
      <!-- 新增员工组件 -->
      <AddEmployee :show-dialog.sync="showDialog" @add-success="getEmployeeList" />

      <!-- 二维码弹框 -->
      <el-dialog
        title="二维码"
        :visible="isShow"
        @close="isShow = false"
      >
        <!-- 这里展示二维码图片 -->
        <!-- 画布 -->
        <canvas ref="qrCodeRef" />
      </el-dialog>

      <!-- 分配角色的弹框 -->
      <el-dialog title="分配角色" :visible="isSow2" @close="handleClose">
        <!-- 复选框组 -->
        <el-checkbox-group v-model="checkedRoleList">
          <!--
           1. label : 两个用途，即使展示的文本，也是提供给v-model用的
           2.如果有插槽了，插槽的内容是给客户显示的，label是给v-model用的
            -->
          <el-checkbox
            v-for="item in roleList"
            :key="item.id"
            :label="item.id"
          >
            {{ item.name }}
          </el-checkbox>
        </el-checkbox-group>
        <template #footer>
          <el-button size="small" @click="handleClose">取消</el-button>
          <el-button size="small" type="primary" @click="handleAssign">确定</el-button>
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { getEmployeeListAPI, delEmployeeAPI, getEmployeeAPI, assignRoleAPI } from '@/api/employees'
// 模块化语法导入默认头像地址
import defaultImgUrl from '@/assets/common/小.jpg'
// 导入常量模块
import obj from '@/constant/employees'
// 导入 add-employee添加员工组件
import AddEmployee from './components/add-employee.vue'

// Excel文件的导入和导出
// 导入/上传：把Excel文件中的数据读到内存中，读出来就是一个数组，基于数组做列表渲染

import { export_json_to_excel } from '@/vendor/Export2Excel'

import { getRoleListAPI } from '@/api/setting'

import QrCode from 'qrcode'
export default {
  name: 'EmployeesView',
  components: {
    AddEmployee
  },
  data() {
    return {
      // 选中角色列表
      checkedRoleList: [],
      // 所有的角色列表
      roleList: [],
      // 员工列表
      employeeList: [],
      // 数据总条数
      total: 0,
      query: {
        page: 1, // 页码
        size: 5 // 条数
      },
      // 默认头像
      defaultImgUrl,
      // 控制新增员工弹框的显示
      showDialog: false,
      // 控制二维码弹框的显示
      isShow: false,
      // 控制分配角色弹框的显示
      isSow2: false
    }
  },
  created() {
    this.getEmployeeList()
  },
  methods: {
    // 分配角色
    async handleAssign() {
      // 发起请求(把选中的角色同步到后台)
      await assignRoleAPI(this.id, this.checkedRoleList)
      // 关闭弹框
      this.handleClose()
      // 给个成功的提示
      this.$message.success('分配角色成功')
    },
    // 分配角色弹框打开时
    async  handleOpen(employeeId) {
      // 保存当前员工id
      this.id = employeeId
      // 控制分配角色弹框的显示
      this.isSow2 = true
      // 发起获取角色的列表的请求
      const resp1 = await getRoleListAPI({
        page: 1,
        pagesize: this.total // 获取所有条数
      })
      // 保存角色列表
      this.roleList = resp1.data.rows

      // 获取当前员工信息(获取当前员工的角色信息)
      const resp2 = await getEmployeeAPI(employeeId)
      // 回显(给v-model绑定的数组赋值角色id数组)
      this.checkedRoleList = resp2.data.roleIds
    },
    // 分配角色弹框关闭时
    handleClose() {
      this.isSow2 = false
      // 重置v-model数组
      this.checkedRoleList = []
    },
    // 下载Excel(当前页)
    handleDownload() {
      // 调用下载Excel文件的方法
      // 表头
      const header = ['姓名', '手机号', '入职日期', '聘用形式', '转正日期', '工号', '部门']
      // 中英文件的对应关系
      const headersRelations = {
        '姓名': 'username',
        '手机号': 'mobile',
        '入职日期': 'timeOfEntry',
        '聘用形式': 'formOfEmployment',
        '转正日期': 'correctionTime',
        '工号': 'workNumber',
        '部门': 'departmentName'
      }
      // 处理employeeLost,得到二维数组
      const data = this.employeeList.map(item => {
        const arr = []
        // 遍历header数组
        header.forEach(zhKey => {
          // 根据中文key得到英文key
          const enKey = headersRelations[zhKey]
          // 如果enKey是formOfEmployment,需要格式化处理
          if (enKey === 'formOfEmployment') {
            // 根据当前对象的聘用形式数字，去obj.hireType数组查找
            const temp = obj.hireType.find(a => a.id === +item[enKey])
            // 三元表达式：如果找到了，item是个对象，则添加value书香，否则添加未知数据
            arr.push(temp ? temp.value : '未知')
          } else {
          // 根据得到的英文key从item对象中去属性值 ,push到arr空数组中
            arr.push(item[enKey])
          }
        })
        // 返回
        return arr
      })
      export_json_to_excel({
        // 表头
        header,
        // 表体
        data,
        // 文件名
        filename: `${this.$store.state.user.userInfo.companyName}员工列表`
      })
    },
    // 下载Excel(所有页)
    async  handleDownloadAll() {
      // 把数据总条数同步到query.size中
      this.query.size = this.total
      // 重置页码为一
      this.query.page = 1
      // 获取员工列表
      await this.getEmployeeList()
      // 下载Excel
      this.handleDownload()
    },
    // 获取员工列表
    async getEmployeeList() {
      // 发请求获取员工列表请求
      const resp = await getEmployeeListAPI(this.query)
      // 解构
      const { rows, total } = resp.data
      // 赋值
      this.employeeList = rows
      this.total = total
    },
    // 自定义下标
    indexMethod(index) {
      // 规则：当前页数的序号 + 1 + (当前页码 — 1) * 每页条数
      return (index + 1) + this.query.size * (this.query.page - 1)
    },
    // 格式化聘用形式
    formatEmployment(formOtEmp) {
      // 根据formOEmployment 去 hireType中查找
      const resp = obj.hireType.find(item => item.id === formOtEmp)
      // 三元：如果找到了，返回对象的value属性 ： 否则返回未知
      return resp ? resp.value : '未知'
    },
    // 格式化账户状态
    formatEnadleState(enableState) {
      // 根据 enableState去workingState中查找
      const item = obj.workingState.find(item => item.id === enableState)
      // 三元：如果找到了，返回对象的value属性 ： 否则返回未知
      return item ? item.value : '未知'
    },
    // 处理每页条数改变时
    handleSizeChange(val) {
      // 把选择的同步到 query.size中
      this.query.size = val
      // 获取员工列表
      this.getEmployeeList()
    },
    // 每页页码改变时
    handleCurrentChange(val) {
      // 把选择的同步到 query.size中
      this.query.page = val
      // 获取员工列表
      this.getEmployeeList()
    },
    // 删除员工
    async  handleDel(employeeId) {
      try {
      // 询问
        await this.$confirm('确定删除嘛', '温馨提示', {
          type: 'warning'
        })
        // 如果当前不是第一页，并且employeeList 只有一条数据
        if (this.query.page > 1 && this.employeeList.length === 1) {
        // 需要让页码自减
          this.query.page--
        }
        // 确定了
        // 发起删除请求
        await delEmployeeAPI(employeeId)
        // 获取员工列表
        this.getEmployeeList()
        // 给个删除成功的提示
        this.$message.success('删除成功')
      } catch (err) {
        // 取消
        this.$message.info('已取消')
      }
    },
    // 展示二维码
    handleQrCode(url) {
      if (!url) return
      // 显示弹框
      this.isShow = true
      this.$nextTick(() => {
      // 把点击的图片二维码地址转为二维码
        QrCode.toCanvas(this.$refs.qrCodeRef, url)
      })
    }
  }
}
</script>

<style>
.el-pagination{
  margin-top: 20px;
}
</style>
